<template>
	<el-container class="home-container">
	  <el-header>
		  <div class="logo">
			  <img src="../assets/LOGO.jpg" />
			  <span>电商后台管理系统</span>
		  </div>
		  <el-button @click="loginout()">退出</el-button>
	 </el-header>
	  <el-container>
	    <el-aside :width="isCollapse?'64px':'200px'">
			<div class="toggle-button" @click="togglecollapse()">|||</div>
			<el-menu    background-color="#333744 "text-color="#fff" active-text-color="#409eff"  :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" router :default-active="path">
			  <el-submenu  :index="item.id +''" v-for="(item,index) in menulist" :key="item.id">
			    <template slot="title">
			      <i class="el-icon-location"></i>
			      <span slot="title">{{item.authName}}</span>
			    </template>
			      <el-menu-item :index="subItem.path" v-for="(subItem,index) in item.children" :key="subItem.id" @click=saveNavState(subItem.path) >
					<i class="el-icon-menu"></i>
					{{subItem.authName}}
				  </el-menu-item>
			
				 </el-submenu>
			</el-menu>

		</el-aside>
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
 export default{
	  data(){
		 return{
			menulist:[],
			isCollapse:false,
			path:''
			}
			
	},
	created() {
		this.getMenuList();
		this.path=sessionStorage.getItem("path");
		console.log(this.path)
	},
	methods:{
	 loginout(){
	  sessionStorage.clear();
	  this.$router.push("/login")
	 }, 
  async	getMenuList(){
	const { data:res }=await this.$http.get('menus')
	  if(res.meta.status==200){
		  this.menulist=res.data
		  console.log(res.data)
	  }
	 },
	 togglecollapse(){
		this.isCollapse=!this.isCollapse;
	 },
	 saveNavState(path){
		 this.path=path;
		 sessionStorage.setItem("path",path)
	 }
	}
}
</script>

<style>
	.el-header{
		background-color: #373d41 ;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 20px;
	}
	.el-header .logo{
		display: flex;
		align-items: center;
	}
	.el-header span{
		margin-left: 15px;
	}
	.el-aside{
		background-color: #333744;
	}
	.el-main{
		background-color: #eaedf1;
	}
	.home-container{
		height: 100%;
	}
	.logo img{
		height: 50px;
		width: 50px;
		border-radius: 80px;
	}
	.el-menu{
	border-right: none;
	}
	.toggle-button{
		background-color: #4a5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: .2em;
		cursor: pointer;
	}
</style>
